<!-- 首页组件 -->
<template>
  <div class="home-view">
    <!-- 头部 -->
    <header :style="changebgColor">
      <div class="search" @click="toSearch">
        搜索商品名称
        <i class="iconfont icon-sousuo"></i>
      </div>
      <i class="iconfont icon-IMliaotian chat"></i>
    </header>
    <!-- 导航 -->
    <div class="nav" :style="changebgColor">
      <!-- 导航 -->
      <ly-tabs v-model="value" activeColor="#fff" @change="changeTabFun">
        <ly-tab-item
          :name="navData.name"
          :title="navData.title"
          v-for="navData in navDatas"
          :key="navData.id"
        />
      </ly-tabs>
      <!-- 分类 -->
      <div class="category" @click="toCategory">
        <i class="iconfont icon-daohangfenlei"></i>
        <span>分类</span>
      </div>
    </div>
    <!-- 动态组件的切换 -->
    <!-- <component :is=""></component> -->
    <!-- 手动设置显示和隐藏  v-if v-show -->
    <!-- 主页面的组件 -->
    <HomeIndex v-show="showFlag" @bgEvent="bgEventFun" />
    <!-- 分类组件 -->
    <HomeCategory v-if="!showFlag" />
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HomeIndex from "./components/HomeIndex/HomeIndex.vue";
import HomeCategory from "./components/HomeCategory/HomeCategory.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { HomeIndex, HomeCategory },
  data() {
    //这里存放数据
    return {
      navDatas: [
        { id: 1, name: "1", title: "首页" },
        { id: 2, name: "2", title: "家用电器" },
        { id: 3, name: "3", title: "男装女装" },
        { id: 4, name: "4", title: "鞋靴箱包" },
        { id: 5, name: "5", title: "手机数码" },
        { id: 6, name: "6", title: "电脑办公" },
        { id: 7, name: "7", title: "家居家访" },
        { id: 8, name: "8", title: "个人化妆" },
        { id: 9, name: "9", title: "休闲运动" },
      ],
      // 点击的nav的属性值
      value: "1",
      showFlag: true,
      changebgColor: { background: "rgb(228, 49, 36)" },
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 跳转到搜索页面
    toSearch() {
      // 记录该条路由的相关信息
      console.log(this.$route);
      // 控制路由的行为和动作;
      console.log(this.$router);
      this.$router.push("/searchview");
    },
    // 分类页面
    toCategory() {
      this.$router.push("/categoryview");
    },
    // 切换导航的tab时的事件
    changeTabFun(name) {
      console.log(name);
      if (name == "1") {
        this.showFlag = true;
      } else {
        this.showFlag = false;
      }
    },
    bgEventFun(data) {
      this.changebgColor = data;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，激活
  deactivated() {}, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.home-view {
  // 首页的头部
  header {
    height: 3rem;
    background-color: rgb(228, 49, 36);
    position: relative;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    .search {
      // flex:1  --- flex-grow:1 flex-shrink:1 flex-basis:0%
      flex: 1;
      background-color: #fff;
      height: 3rem;
      border-radius: 1.43rem;
      font-size: 1.3rem;
      padding: 0 1rem 0 2rem;
      margin: 0 0.6rem 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #999;
    }
    .chat {
      color: #fff;
      font-size: 2rem;
    }
  }
  // 导航
  .nav {
    width: 100%;
    height: 4rem;
    background-color: rgb(228, 49, 36);
    position: relative;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    // 导航
    .ly-tabs {
      width: 80%;
      height: 4rem;
      background-color: transparent;
      border-bottom: 0;
      .ly-tab-item {
        padding: 1rem 0.8rem;
      }
      .ly-tab-item[style="color: rgb(255, 255, 255);"] {
        font-weight: 700;
      }
      .ly-tabs__active-line {
        width: 1.2rem !important;
        height: 0.6rem !important;
        border-radius: ~"0 0 50% 50% / 0 0 100% 100%";
        left: 0.8rem;
        border: 0.2rem solid #fff;
        border-top: 0;
        background-color: transparent !important;
        box-sizing: border-box;
      }
    }
    .category {
      width: 19%;
      height: 2.5rem;
      line-height: 2.5rem;
      box-shadow: -6px 0 4px -4px rgba(0, 0, 0, 0.4);
      font-size: 1.4rem;
      i {
        margin: 0 0.5rem 0 0.5rem;
      }
    }
  }
}
</style>